<!--
 * new page
 * @author: sunYihui
 * @since: 2024-09-03
 * fu.vue
-->
<template>
  <div class="container" @ZiClick="ZiClickHandle">
    父亲：{{ ziData }}
    <zi :data="data"></zi>
    <sun></sun>
    <sun1></sun1>
   


  </div>
</template>

<script setup lang="ts">
import zi from './ziView.vue'
import sun from './sunView.vue'
import sun1 from './sun1View.vue'
import { ref,reactive ,provide} from 'vue'

const data = ref('父组件传递给子组件的数据')
const ziData=ref('子组件传递给父组件的数据')
const ZiClickHandle=(e:any)=>{
  console.log('父组件监听到子组件的点击事件',e)
  ziData.value=e
}

let car = reactive({name:'爷爷孙一辉',price:'400000000万'})
provide('car',car)
</script>

<style scoped lang="less">
.container{
    width: 800px;
    height: 800px;
    background-color: pink;
}
</style>
